import "./index.less";
import { useLocation, useNavigate } from "react-router-dom";
import { PageHeader } from "@/components";
import { useEffect, useMemo, useState } from "react";
import { Divider, TextArea, Toast } from "antd-mobile";
import moment from "moment";
import { ExclamationOutline } from "antd-mobile-icons";

export default function ServiceEvaluate() {
  const navigate = useNavigate();
  const location = useLocation();
  const ItemInfo = location?.state?.ItemInfo;
  const [evaluate, setEvaluate] = useState<number>(0);
  const [evaluateContent, setEvaluateContent] = useState<string>();
  useEffect(() => {
    setEvaluate(location?.state?.ItemInfo?.evaluate);
    setEvaluateContent(location?.state?.ItemInfo?.evaluateContent);
  }, []);

  return (
    <div className="sese_contarnier">
      <div className="header-bg"></div>
      <PageHeader
        title="发布评价"
        goback={() =>
          navigate(`/publicService/entry/report`, {
            state: {
              ItemInfo: location?.state?.ItemInfo,
            },
          })
        }
      />

      <div className="sese_content">
        <div className="sese_content_evaluate">
          <div className="sese_ce_top">
            <div className="sese_cet_title">{ItemInfo?.type}</div>
            <div className="sese_cet_time">
              {moment().format("YYYY-MM-DD HH:mm:ss")}
            </div>
            <div className="sese_cet_type">{ItemInfo?.eventType}</div>
          </div>
          <Divider />
          <div className="sese_ce_bottom">
            <div className="sese_ceb_evaluate">
              <span>评分：</span>
              <div className="evaluateBox">
                {[1, 2, 3, 4, 5]?.map((i: any) => {
                  return (
                    <img
                      key={i}
                      onClick={() => setEvaluate(i === evaluate ? i - 1 : i)}
                      src={
                        evaluate >= i
                          ? "/images/starSel.png"
                          : "/images/star.png"
                      }
                    />
                  );
                })}
              </div>
              <span className="sese_ceb_point">{evaluate}.0</span>
            </div>
            <div className="sese_ceb_content">
              <TextArea
                placeholder="请输入评价内容..."
                rows={5}
                value={evaluateContent}
                onChange={(v: string) => setEvaluateContent(v)}
              />
            </div>
          </div>
        </div>
        <div
          className="submitBtn"
          onClick={() => {
            if (!evaluate) {
              Toast.show({
                icon: <ExclamationOutline />,
                content: (
                  <div style={{ color: "#ffffff", fontSize: 26 }}>
                    您还未评分!
                  </div>
                ),
              });
            } else {
              navigate(`/publicService/entry/report`, {
                state: {
                  ItemInfo: {
                    ...location?.state?.ItemInfo,
                    evaluate: evaluate,
                    evaluateContent: evaluateContent,
                  },
                },
              });
            }
          }}
        >
          确定
        </div>
      </div>
    </div>
  );
}
